<template>
  <div class="button-group display-flex flex-justify-between">
    <el-button class="flex-1" @click="handleNavigate('/login/code-login')">{{
      $t('login.phone-login')
    }}</el-button>
    <el-button class="flex-1" @click="handleNavigate('/login/qrcode-login')">{{
      $t('login.scan-login')
    }}</el-button>
  </div>
  <div class="division display-flex flex-align">
    <div class="division-line flex-1"></div>
    <div class="division-txt">{{ $t('login.other-login-methods') }}</div>
    <div class="division-line flex-1"></div>
  </div>
  <div class="other-login display-flex flex-align flex-justify">
    <div
      class="other-login-item display-flex flex-align flex-justify"
      v-for="item in otherLoginList"
      :key="item.name"
    >
      <core-svg :name="item.name"></core-svg>
    </div>
  </div>
  <div class="create-account display-flex flex-justify">
    {{ $t('login.no-account')
    }}<span class="create-button" @click="handleNavigate('/login/register')">{{
      $t('login.create-account')
    }}</span>
  </div>
</template>

<script setup lang="ts">
const emits = defineEmits<{ navigate: [string] }>()

const handleNavigate = (path: string) => {
  emits('navigate', path)
}

const otherLoginList = [
  { name: 'enterprise-wechat' },
  { name: 'wechat' },
  { name: 'qq' },
  { name: 'github' },
  { name: 'gitee' }
]
</script>

<style scoped lang="scss">
.button-group {
  .el-button + .el-button {
    margin-left: 16px;
  }
}

.division {
  height: 16px;
  margin: 12px 0;

  .division-txt {
    margin: 0 22px;
    font-size: 12px;
    color: var(--core-text-color-05);
  }

  .division-line {
    height: 1px;
    background-color: var(--core-border-color-02);
  }
}

.other-login {
  gap: 12px;

  .other-login-item {
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.8;
    transition: all 0.2s;

    &:hover {
      background-color: var(--core-bg-color-04);
      opacity: 1;
    }
  }
}

.create-account {
  margin-top: 16px;
  font-size: 14px;

  .create-button {
    color: rgb(var(--core-primary-color));
    cursor: pointer;
  }
}
</style>
